import React, { useEffect, useRef, useState } from 'react';
import {
  Form,
  Input,
  Modal,
  Select,
  Row,
  Col,
  DatePicker,
  message,
} from 'antd';
import { adminCompanyType } from '@/utils/constant';
import { useRequest, useUpdateEffect } from '@umijs/hooks';
import {
  apiEmployeeGetList,
  apiPurchaseCommodityGetList,
  apiPurchaseGetList,
} from '@/services/otherServices';

const FormItem = Form.Item;
const Detail = (props: any) => {
  const {
    visible,
    onCancel,
    onOk,
    getForm,
    loading,
    afterClose,
    editId,
  } = props;
  const [form] = Form.useForm();
  const [searchValue, setSearchValue] = useState('');
  const [data, setData] = useState([]);
  const [selectData, setSelectData] = useState([]);
  const [selectData2, setSelectData2] = useState([]);
  const [materialType, setMaterialType] = useState(undefined);
  const [productName, setProductName] = useState(undefined);
  const [model, setModel] = useState(undefined);

  const [productNameValue, setProductNameValue] = useState('');
  const [modelValue, setModalValue] = useState('');

  const [searchPeopleValue, setSearchPeopleValue] = useState('');
  const [peopleData, setPeopleData] = useState([]);

  const { loading: getPeopleLoading, run: getPeople } = useRequest(
    apiEmployeeGetList,
    {
      manual: true,
      throttleInterval: 500,
      onSuccess: (res, params) => {
        setPeopleData(res.data);
      },
    },
  );

  const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 4 },
      md: { span: 4 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 18 },
      md: { span: 18 },
    },
  };

  const { loading: getListLoading, run } = useRequest(apiPurchaseGetList, {
    manual: true,
    throttleInterval: 500,
    onSuccess: (res, params) => {
      setData(res.data);
    },
  });

  const { loading: pageLoading, run: getPage } = useRequest(
    apiPurchaseCommodityGetList,
    {
      manual: true,
      debounceInterval: 500,
      onSuccess: (res, params) => {
        setSelectData(res.data);
      },
    },
  );

  const { loading: pageLoading2, run: getPage2 } = useRequest(
    apiPurchaseCommodityGetList,
    {
      manual: true,
      debounceInterval: 500,
      onSuccess: (res, params) => {
        setSelectData2(res.data);
      },
    },
  );

  useUpdateEffect(() => {
    run({
      productName: searchValue,
      pageNo: 1,
      pageSize: 10,
    });
  }, [searchValue]);

  useUpdateEffect(() => {
    getPeople({
      name: searchPeopleValue,
      pageNo: 1,
      pageSize: 10,
    });
  }, [searchPeopleValue]);

  useUpdateEffect(() => {
    if (materialType === '' || materialType === undefined) {
      message.destroy();
      message.error('请先选择分类');
      return;
    }
    getPage({
      productName: productNameValue,
      materialType,
      pageNo: 1,
      pageSize: 10,
    });
  }, [productNameValue]);

  useUpdateEffect(() => {
    if (productName === '' || productName === undefined) {
      message.destroy();
      message.error('请先选择品名');
      return;
    }
    getPage2({
      model: modelValue,
      productName: productName,
      materialType,
      pageNo: 1,
      pageSize: 10,
    });
  }, [modelValue]);

  useUpdateEffect(() => {
    if (visible === true) {
      run({
        pageNo: 1,
        pageSize: 10,
      });
      getPeople({
        pageNo: 1,
        pageSize: 10,
      });
    }
  }, [visible]);

  useEffect(() => {
    getForm(form);
  }, []);

  const onValuesChange = (changedValues: any, allValues: any) => {
    if (changedValues.materialType) {
      form.setFieldsValue({
        productName: '',
        model: '',
      });
      setMaterialType(changedValues.materialType);
      getPage({
        pageNo: 1,
        pageSize: 10,
        materialType: changedValues.materialType,
      });
    }
    if (changedValues.productName) {
      form.setFieldsValue({
        model: '',
      });
      setProductName(changedValues.productName);
      getPage2({
        pageNo: 1,
        pageSize: 10,
        materialType: materialType,
        productName: changedValues.productName,
      });
    }
    if (changedValues.model) {
      const result: any = selectData2.filter(
        (n: any) => n.model === changedValues.model,
      );

      setModel(changedValues.model);
      console.log(result);
      form.setFieldsValue({
        commodityId: result[0]?.id,
      });
    }
  };

  return (
    <Modal
      afterClose={afterClose}
      destroyOnClose={true}
      width={1024}
      confirmLoading={loading}
      title={editId !== undefined ? '编辑' : '新增'}
      visible={visible}
      onCancel={onCancel}
      onOk={onOk}
    >
      <Form
        hideRequiredMark
        style={{ marginTop: 8 }}
        form={form}
        name="basic"
        onValuesChange={onValuesChange}
      >
        <Row gutter={12}>
          <Col span={12} style={{ display: 'none' }}>
            <FormItem
              rules={[{ required: true, message: '请输入供应商' }]}
              {...formItemLayout}
              label={'供应商'}
              name="commodityId"
            >
              <Input />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              {...formItemLayout}
              label={'领取公司'}
              name="receiptCompany"
              rules={[{ required: true, message: '请选择领取公司' }]}
            >
              <Select>
                {adminCompanyType.map(item => (
                  <Select.Option key={item.value} value={item.value}>
                    {item.label}
                  </Select.Option>
                ))}
              </Select>
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              rules={[{ required: true, message: '请选择分类' }]}
              {...formItemLayout}
              label={'分类'}
              name="materialType"
            >
              <Select>
                <Select.Option value={'原料'}>原料</Select.Option>
                <Select.Option value={'边料'}>边料</Select.Option>
                <Select.Option value={'化工'}>化工</Select.Option>
                <Select.Option value={'配件'}>配件</Select.Option>
              </Select>
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              rules={[{ required: true, message: '请输入品名' }]}
              {...formItemLayout}
              label={'品名'}
              name="productName"
            >
              <Select
                showSearch
                onSearch={value => {
                  setProductNameValue(value);
                }}
                filterOption={false}
                placeholder="请选择品名"
              >
                {selectData &&
                  selectData.map((item: any) => (
                    <Select.Option key={item.id} value={item.productName}>
                      {item.productName}
                    </Select.Option>
                  ))}
              </Select>
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              rules={[{ required: true, message: '请输入型号' }]}
              {...formItemLayout}
              label={'型号'}
              name="model"
            >
              <Select
                showSearch
                onSearch={value => {
                  setModalValue(value);
                }}
                filterOption={false}
                placeholder="请选择型号"
              >
                {selectData2 &&
                  selectData2.map((item: any) => (
                    <Select.Option key={item.id} value={item.model}>
                      {item.model}
                    </Select.Option>
                  ))}
              </Select>
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              {...formItemLayout}
              rules={[{ required: true, message: '请输入领取数量' }]}
              label={'领取数量'}
              name="amount"
            >
              <Input />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              {...formItemLayout}
              label={'领取日期'}
              rules={[{ required: true, message: '请选择领取日期' }]}
              name="receiptDate"
            >
              <DatePicker
                placeholder={'请选择领取日期'}
                style={{ width: '100%' }}
              />
            </FormItem>
          </Col>

          <Col span={12}>
            <FormItem
              {...formItemLayout}
              label={'领取人'}
              rules={[{ required: true, message: '请选择领取人' }]}
              name="receiptor"
            >
              <Select
                showSearch
                onSearch={value => {
                  setSearchPeopleValue(value);
                }}
                filterOption={false}
                placeholder="请选择领取人"
              >
                {peopleData &&
                  peopleData.map((item: any) => (
                    <Select.Option key={item.id} value={item.name}>
                      {item.name}
                    </Select.Option>
                  ))}
              </Select>
            </FormItem>
          </Col>

          <Col span={12}>
            <FormItem {...formItemLayout} label={'备注'} name="remark">
              <Input.TextArea />
            </FormItem>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
};
export default Detail;
